<template>
    <el-table :data="tableData" stripe style="width: 100%" height="425" @sort-change="sortChange">
        <el-table-column label="员工">
            <template #default="scope">
                <div class="work_use">
                    <el-image class="user_avatar" :src="scope.row.work_user_avatar"></el-image>
                    <p>{{ scope.row.work_user_name }}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="publish_status" label="发送状态">
            <template #default="scope">
                <span>{{ scope.row.publish_status === 1 ? '已发表' : '未发表' }}</span>
            </template>
        </el-table-column>
        <el-table-column width="170" prop="publish_time" sortable label="发送时间">
            <template #default="scope">
                <span v-if="scope.row.publish_time">{{ scope.row.publish_time }}</span>
                <span v-else>— —</span>
            </template>
        </el-table-column>
        <el-table-column prop="like_nums" sortable label="点赞数" />
        <el-table-column prop="comment_nums" sortable label="评论数" />
        <el-table-column prop="comment_user_nums" sortable label="评论人数" />
        <el-table-column prop="handle" label="操作" fixed="right">
            <template #default="scope">
                <el-button v-if="scope.row.publish_status !== 1" size="small" @click="RemindMess(scope.row)"
                    >提醒发送</el-button
                >
                <div v-else>--</div>
            </template>
        </el-table-column>
        <template #empty>
            <img style="transform: translateX(15%)" class="emty_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">{{ '暂无数据' }}</div>
        </template>
    </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import bus from '@/utils/bus';
import router from '@/router';
import { messInfoRemind } from '@/api/friendcircle';
// import { Sort } from '@element-plus/icons-vue/dist/types'

const tableData = ref([]);

const sortChange = (obj: any) => {
    const params = {
        prop: obj.prop,
        sort: 'ASC'
    };
    if (obj.order === 'ascending') {
        params.sort = 'ASC';
    }
    if (obj.order === 'descending') {
        params.sort = 'DESC';
    }
    if (obj.prop === null && obj.order === null) {
        params.prop = 'like_nums';
        params.sort = 'DESC';
    }

    bus.emit('Sort', params);
};
const RemindMess = (row: any) => {
    messInfoRemind({
        work_user_id: row.work_user_id,
        send_moment_id: router.currentRoute.value.query.id,
        task_id: row.id
    }).then((res: any) => {
        ElMessage({
            message: '提醒发送成功',
            type: 'success',
            duration: 2000
        });
    });
};

const TableDataFn = (data: any) => {
    tableData.value = data;
};

bus.on('TableData', TableDataFn);
</script>

<style lang="scss" scoped>
.work_use {
    display: flex;
    align-items: center;

    :deep .user_avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        margin-right: 10px;
    }
}
</style>
<style lang="scss">
.el-table {
    .el-table__header-wrapper,
    .el-table__fixed,
    .el-table__fixed-right {
        .el-table__header {
            thead {
                tr {
                    th {
                        background-color: #f9f9f9;
                    }
                }
            }
        }
    }
}
</style>
